import React, { Fragment, Component } from "react";
import {
  View,
  Text,
  StyleSheet,
  TouchableHighlight,
  Switch,
  Image
} from "react-native";
import Ionicons from "react-native-vector-icons/Ionicons";
//import console = require("console");
class MyItem extends Component {
  constructor() {
    super();
    this.state = {};
  }
  rightView() {
    return (
      <View style={styles.rightViewStyle}>
        {this.renderRightContent()}
        <Ionicons
          name={"ios-arrow-forward"}
          size={24}
          style={{ marginRight: 15 }}
        />
      </View>
    );
  }
  renderRightContent() {
    if (this.props.hasOwnProperty("rightImageName")) {
      return (
        <Image
          source={require(`../../images/qianbao.png`)}
        />
      );
    } else {
      return <Text>{this.props.rightTitle}</Text>;
    }
  }
  render() {
    var leftImageName = this.props.leftImageName;
    console.log(this.props.leftImageName)
    var leftUri = "../../images/"+leftImageName+".png"
    return (
      <Fragment>
        <TouchableHighlight>
          <View style={styles.container}>
            <View style={styles.leftViewStyle}>
              <Image
                source={require('../../images/qianbao.png')}
                style={{width:30,height:30,borderRadius:15}}
              />
              <Text>{this.props.leftTitle}</Text>
            </View>
            <View>{this.rightView()}</View>
          </View>
        </TouchableHighlight>
      </Fragment>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    backgroundColor: "white",
    height: 50
  },
  leftViewStyle: {
      flexDirection:'row',
      justifyContent:'center',
  },
  rightViewStyle: {
      flexDirection:'row',
      justifyContent:'center',
  }
});
export default MyItem;
